<template>
  <div id="progress">
    <el-row>
      <el-col :span="3">
        <div class=" common count leftNumColor" :style="{color:params.leftNumberColor}">{{ params.leftTopValue||21 }}</div>
        <div class=" common text">{{ params.leftBottomValue||"处理中" }}</div>
      </el-col>
      <el-col :span="18">
        <div class="common text">
            <div v-show="params.showMiddleTop">
                <span class="text">{{params.middleTopText||"总计"}}:</span>
                <span class="count">{{ params.middleTopValue||100 }}</span>
            </div>
        </div>
        <div class="common">
          <div ref="progress" class="progress" :style="{backgroundImage:gradientColor}">
            <div
              v-for="(item, index) in 100"
              :key="index"
              class="divblock"
              :class="{
                active: index % 2 == 1,
                settransparent: index % 2 == 0 && index < params.leftTopValue,
              }"
            ></div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class=" common count rightNumColor" :style="{color:params.rightNumberColor}">{{ params.rightTopValue||"已完成" }}</div>
        <div class=" common text">{{ params.rightBottomValue||40 }}</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ["params","gradientColor"],
  data() {
    return {
    }
  },
  mounted(){
  }
};
</script>
<style scoped>
#progress .el-row .el-col {
  text-align: center;
}
.common {
  height: 60px;
  line-height: 60px;
}
.progress {
  height: 18px;
  width: 100%;
  margin: 0 auto;
  margin-right: -1px;
  background-image: linear-gradient(to right, #34ecff, #ffe18f);
}
.divblock {
  width: 1%;
  height: 20px;
  margin-top: -1px;
  float: left;
  /* background-color: gainsboro; */
  background-color: #1A3538;
}
.active {
  background-color: #626161;
}
.settransparent {
  background-color: transparent;
}
.text{
    font-size: 28px;
    color: #b4e0f0;
}
.count{
    font-size: 30px;
    font-weight: 900;
    color: #ffe643;
}
.rightNumColor{
    color: #ffe643;
}
.leftNumColor{
    color: #0B98FE;
}
</style>